<template>
  <div class="login_panel">
    <transition-group name="list-complete">
      <InputBox
        icon="ri-user-line"
        placeholder="用户名/邮箱/手机号码"
        v-model:value="username"
        key="username"
        :on-enter="login"
      />
      <InputBox
        icon="ri-lock-line"
        placeholder="密码"
        type="password"
        v-model:value="password"
        key="password"
        :on-enter="login"
      />
      <InputBox
        icon="ri-key-fill"
        placeholder="验证码"
        v-model:value="captcha"
        v-if="needCaptcha"
        :on-enter="login"
        :button="captchaManager.captcha.countDown || captchaManager.captcha.text"
        :button-on-click="getCaptcha"
      />
      <CheckBoxSelector
        v-slot="{ color, click }"
        key="submit"
        :checked-click="[login, forgetPassword]"
        :onChecked="[hideCaptchaInput, showCaptchaInput]"
      >
        <SubmitButton :primary-color="color[0]" @click="click(0)">登录</SubmitButton>
        <SubmitButton :primary-color="color[1]" @click="click(1)">重置密码</SubmitButton>
      </CheckBoxSelector>
    </transition-group>
  </div>
</template>

<script>
import { inject, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import InputBox from "../components/InputBox.vue";
import SubmitButton from "../components/SubmitButton.vue";
import CheckBoxSelector from "../components/CheckBoxSelector.vue";
import CaptchaManager from "../utils/CaptchaManager.js";
import store from "../store";
import { apis, tipsPromiseHandler } from "../api";

export default {
  components: { CheckBoxSelector, SubmitButton, InputBox },
  setup() {
    const captchaManager = reactive(CaptchaManager.getInstance())
    const Store = inject('store', store)
    const router = useRouter()
    const data = reactive({
      username: '',
      password: '',
      captcha: '',
      needCaptcha: false
    })

    const showCaptchaInput = () => data.needCaptcha = true
    const hideCaptchaInput = () => data.needCaptcha = false

    const login = () => {
      let promise = apis.login(data.username, data.password)
      tipsPromiseHandler(promise, (result) => {
        Store.token = result?.result || ''
        router.push(router.currentRoute.value.redirectedFrom || '/')
      })
    }

    const forgetPassword = () => {
      let promise = apis.forgetPassword(data.username, data.password, data.captcha)
      tipsPromiseHandler(promise, hideCaptchaInput)
    }

    captchaManager.onStart['login'] = ({ resolve, reject }) => {
      let promise = apis.getCaptcha(data.username)
      tipsPromiseHandler(promise, resolve, reject)
    }

    const getCaptcha = () => captchaManager.start('login')
    return {
      ...toRefs(data),
      login,
      getCaptcha,
      forgetPassword,
      showCaptchaInput,
      hideCaptchaInput,
      captchaManager
    }
  }
}
</script>

<style scoped lang="less">
.login_panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 20px;

  & > * {
    transition: all 0.3s ease;
  }

  & > *:nth-last-child(1) {
    margin-top: 10px;
  }
}

.list-complete-enter-from,
.list-complete-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.list-complete-leave-active {
  position: absolute;
}
</style>